<form id="previewForm" lay-filter="previewForm" class="layui-form model-form">
</form>

<!-- [ 主内容区 ] start -->
<div class="pcoded-wrapper" id="app" style="{fontSize: fontSize + 'px' }">

    <div class="card-block table-border-style" style="margin-top: 2px">
        <div class="table-responsive">
            <!-- [ 加载状态  ] End -->
            <div style="width: 100%;text-align: center;"><h1 id="title"></h1></div>
            <div style="width: 100%;text-align: center;"><p class="text-muted mb-0" id="remark"></p></div>
            <div style="width: 100%;text-align: center;margin-top: 5px;"><p class="text-muted mb-0">
                页面字号：&nbsp;[&nbsp;
                <a onclick="fontSize(10)" style="cursor:pointer;">小</a>&nbsp;
                <a onclick="fontSize(14)" style="cursor:pointer;">中</a>&nbsp;
                <a onclick="fontSize(20)"  style="cursor:pointer;">大</a>
                &nbsp;]</p>
            </div>
            <br>
            <div id="view"></div>
            <ul style="margin-left: -30px;">
            </ul>
        </div>
    </div>
    <!--<button type="button" class="btn btn-secondary btn-sm md-trigger" onClick="window.print()"
            style="margin-left: 15px;"><i class="feather icon-printer"></i>打印试卷
    </button>-->

</div>
<script id="renderBox" type="text/html">
    <!--    <template>-->
    <li>
        {{# layui.each(d,function(index,item){ }}
        <h6 style="margin-top: 10px;"><b>{{index+1}}</b><b>、</b><b>{{item.title}}</b></h6>
        {{# layui.each(item.mapList,function(index,item1){ }}
        <ul style="margin-left: -20px;">
            <li style="list-style-type:none;margin-top: 5px;margin-left: 30px">
               <!-- {{index+1}} .-->
                <span>{{item1.title}}</span>
                <br>
                {{# if(item.type == 0 || item.type == 1){ }}
                <div style="margin-top: 5px;margin-left: 20px;">
                    {{item1.foption.split(",fh,").join("&nbsp;&nbsp;&nbsp;")}}
                </div>

                {{# if(item1.answer != "" && item1.answer != null){ }}
                <div style="color: red">选项为:{{item1.answer}}</div>
                {{# } }}
               {{# } }}
                {{# if(item.type == 2 || item.type == 3 || item.type == 4){ }}
                <div style="margin-top: 5px;margin-left: 20px;">
<!--                    {{item1.foption}}-->
                </div>
                {{# if(item1.answer != "" && item1.answer != null){ }}
                <div style="color: red">答案为:{{item1.answer}}</div>
                {{# } }}
                {{# } }}
            </li>
        </ul>
        {{# }); }}
        {{# }); }}
    </li>
</script>
<style>
    .card-block.table-border-style {
        background-color: whitesmoke;
        margin-left: 50px;
        margin-right: 50px;
    }
    #app{
        height: 560px;
        overflow: auto;
    }
    #previewForm{
        padding: 0px !important;
    }
</style>
<!--<link rel="stylesheet" href="/assets/css/style.css">-->
<!-- [ 主内容区 ] end -->
<script>
    layui.use(['layer', 'table', 'tableX', 'notice', 'xnUtil', 'admin', 'form', 'laytpl'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var table = layui.table;
        var tableX = layui.tableX;
        var admin = layui.admin;
        var form = layui.form;
        var notice = layui.notice;
        var xnUtil = layui.xnUtil;
        var laytpl = layui.laytpl;

        var editData = admin.getLayerData('#previewForm').data;
        if (editData != null && editData != undefined) {
            document.getElementById('title').textContent = editData.title;
            admin.req(getProjectUrl() + 'testpaper/detailList?testpaperId=' + editData.testpaperId+"&userId="+editData.userId+"&id="+editData.id, function (res) {
                debugger;
                //重载表格
                var extTableData = res.data;
                var tplStr = document.getElementById('renderBox').innerHTML;
                //渲染数据
                var views = document.getElementById('view');
                laytpl(tplStr).render(extTableData.testpapermxList, function (html) {
                    views.innerHTML = html;
                });
            });
        }
    });
    function fontSize(size){
        var sty = document.getElementsByTagName("h6");
        for(var i = 0;i < sty.length;i++){
            sty[i].style.fontSize = size+2+"px";
        }
        document.getElementById("app").style.fontSize = size+"px";
    }
</script>

</body>
</html>
